<template>
  <div class="list">
    <div class="header" v-if="isTrue">
      <CatIcon class="CatIcon" />
      <p>您的购物车还是空空的，快去逛逛吧！</p>
      <CatBtn class="CatBtn" />
    </div>
    <div v-if="isShow">
      <City></City>
      <Showshop></Showshop>
    </div>
    <div class="mid">
      <h5>猜你喜欢</h5>
      <hr />
    </div>
    <div>
      <List />
    </div>
    <div v-if="isCompt">
      <Comput></Comput>
    </div>

    <NavFooter :isActive="3"></NavFooter>
  </div>
</template>
<script>
import CatIcon from '../../components/shopping/CatIcon'
import CatBtn from '../../components/shopping/CatBtn'
import List from '../../components/shopping/List'
import City from '../../components/shopping/goShopping/City'
import Showshop from '../../components/shopping/goShopping/Showshop'
import NavFooter from '../../components/public/NavFooter'
import Comput from '../../components/shopping/goShopping/Computed'

// import { onMounted } from 'vue'
// import store from '../../store/index.js'
export default {
  data() {
    return {
      isTrue: true,
      isShow: false,
      isCompt: false,
    }
  },
  mounted() {
    this.kan()
  },
  methods: {
    kan() {
      const value = JSON.parse(localStorage.getItem('data'))
      if (value && value.length > 0) {
        this.isTrue = !this.isTrue
        this.isShow = !this.isShow
        this.isCompt = !this.isCompt
      } else if (!value || value.length == 0) {
        this.isCompt = false
        this.isShow = false
      }
    },
  },
  components: {
    CatIcon,
    CatBtn,
    List,
    City,
    Showshop,
    NavFooter,
    Comput,
  },
}
</script>
<style lang="less" scoped>
.list {
  background: RGB(244, 244, 244);
  overflow: hidden;
}
.header {
  margin: 0.8rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #333;
  padding-bottom: 40px;
  .CatIcon {
    margin-top: 40px;
  }
  .CatBtn {
    font-size: 14px;
  }
}
.mid {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  h5 {
    background: RGB(244, 244, 244);
    padding: 0;
    margin: 0;
    z-index: 2;
    color: #888;
    font-weight: 500;
  }
  hr {
    background: #ddd;
    height: 1px;
    border: 1px;
    position: absolute;
    left: 100px;
    right: 100px;
    top: 50%;
    margin-top: 1px;
    z-index: 1;
  }
}
</style>
